"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/12/21
 */
import * as React from 'react'
import {SCREEN_WIDTH} from "../constant";
import Colors from "../assets/styles/Colors";
import {MyImageProps} from "../interface/component";

const {Image} = require('react-native');
const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
const {CachedImage, ImageCache, CachedImageBackground} = require('react-native-img-cache');

class MyImage extends React.Component<MyImageProps, any> {


    static defaultProps = {
        canShowLightBox: true
    };

    _image: any;
    load: boolean;

    getStyle = () => {
        let styles = {...this.props.style};
        if (this.props.size) {
            if (typeof this.props.size === 'number') {
                styles['width'] = this.props.size;
                styles['height'] = this.props.size;
            } else {
                styles = {...styles, ...this.props.size};
            }
        }
        return styles;
    };
    onLoadStart = (e) => {
        // console.log(this.load, this.props.source);
        // if (this.props.onLoadStart) {
        //     this.props.onLoadStart(e)
        // }
        // if (this.load) return;
        // this.load = false;
        // let source = resolveAssetSource(this.props.placeholder);
        // if (!Array.isArray(source)) {
        //     source = [source];
        // }
        // this._image.setNativeProps({
        //     source
        // });
    };
    onLoad = (e) => {
        if (this.props.onLoad) {
            this.props.onLoad(e)
        }
        // if (!this.load) {
        //     this.load = true;
        // }
        // let source = resolveAssetSource(this.props.source);
        // if (!Array.isArray(source)) {
        //     source = [source];
        // }
        // this._image.setNativeProps({
        //     source
        // });

    };
    onLoadEnd = (e) => {
        if (this.props.onLoadEnd) {
            this.props.onLoadEnd(e)
        }
    };

    render() {

        if (React.Children.count(this.props.children) > 0) {
            return <CachedImageBackground {...this.props} {...this.getStyle()}>{this.props.children}</CachedImageBackground>
        }
        return (
            <CachedImage {...this.props} {...this.getStyle()}/>
        );
    }
}


/**
 *  ref={image => this._image = image}
 *  onLoadEnd={this.onLoadEnd}
 *  onLoad={this.onLoad}
 *  onLoadStart={this.onLoadStart}
 */

export default MyImage;